<template>
  <view class="mine-set-wrap" >
    <picker @change="bindAreaChange" :value="regionIndex" :range="regionArray">
    <view class="ceil" >
      <view class="ceil__label" >所属区域</view>
      <view class="change-btn" >
        {{ regionName ? regionName : '请选择所属区域' }}
      </view>
      <view class="iconfont icon-arrow-right ceil__arrow" ></view>
    </view>
    </picker>

    <button
    @tap="handleLoginOut"
    class="pp-button login-out"
    hover-class="pp-button--active">
      退出登录
    </button>
  </view>
</template>

<script>
  import { AREA_LIST, AREA_BIND_USER, USER_INFO } from '@/api';
  export default {
    data() {
      return {
        regionIndex: '',
        regionArray: [],
        regionList: [],
        regionName: '',
        regionId: ''
      }
    },
    onLoad() {
      this.getUserInfo();

      this.getRegion();
    },
    methods: {
      getUserInfo() {
        this.$http
          .get(USER_INFO)
          .then(res => {
            const { region } = res.data;

            if (region) {
              this.regionId = region.id;
              this.regionName = region.name;
              uni.setStorageSync('regionId', region.id);
              uni.setStorageSync('regionName', region.name);
            }
          })

      },
      /**
       * 区域列表
       */
      getRegion() {
        this.$http.get(AREA_LIST, {
          per_page: 100,
        })
          .then(res => {
            const regionList = res.data;
            this.regionList = regionList;
            this.regionArray =  regionList.map(item => {
              return item.name;
            })

            regionList.forEach((item, index) => {
              if(this.regionId && item.id === this.regionId) {
                this.regionIndex = index
              }
            })
          })
      },

      /**
       * 区域选择
       */
      bindAreaChange(e) {
        if(this.regionIndex === +e.target.value) {
          return
        }

        // 区域绑定
        this.$http.post(
            AREA_BIND_USER,
            {
              region_id: this.regionList[+e.target.value].id,
            },
            {
              showLoading: true,
            }
          )
          .then(() => {
            uni.hideLoading();
            this.regionIndex = +e.target.value;
            this.regionName = this.regionArray[+e.target.value];

            uni.setStorageSync('regionId', this.regionList[+e.target.value].id);
            uni.setStorageSync('regionName', this.regionName);
            uni.setStorageSync('regionSet', 1);

            setTimeout(() => {
              uni.showToast({
                title: '绑定区域成功',
                icon: 'success',
              });
            }, 500)
          })
      },

      /**
       * 退出
       */
      handleLoginOut() {
        uni.showModal({
          content: '确认退出登录?',
          confirmText: '确认',
          success: res => {
            if (res.confirm) {
               uni.removeStorageSync('nickName');
               uni.removeStorageSync('accessToken');
               uni.removeStorageSync("regionId");
               uni.clearStorageSync();
               uni.reLaunch({
                   url: '/pages/login/index'
               });
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          },
        });
      }
    }

  }
</script>

<style lang="less" >
  .mine-set-wrap{
    min-height: 100vh;
    padding-top: 80rpx;
    background-color: #FFFFFF;
    .ceil{
      display: flex;
      align-items: center;
      position: relative;
      height: 132rpx;
      width: 100%;
      padding: 0 20rpx 0 40rpx;
      &::before{
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 710rpx;
        height: 1px;
        background-color: #EEEEEE;
      }
      &__label{
        flex: 1;
        font-size: 32rpx;
        color: #494949;
      }
      &__arrow{
        flex-shrink: 0;
        font-size: 36rpx;
        color: #999999;
      }
    }
    .login-out{
      width: 710rpx;
      margin: auto;
      margin-top: 200rpx;
    }
  }
</style>
